import React, { useState, useEffect, useCallback } from 'react'
import { useHistory } from 'react-router-dom'
import { getSofCashOverviewCash, postSofCashFindCash } from "../../api";
import SelectModule from "./components/SelectModule";
import NoMoneyModule from './components/NoMoneyModule'
import RegisterMoney from './components/RegisterMoney'
import {
    EarnestMoneyAll
} from './style'
import { PageHeader, Button, message, Row, Col, Statistic, Table, Space } from "antd";

/**
 * @description: 保证金押金页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-17） 押金概览
 */

const EarnestMoney = () => {
    const history = useHistory()
    const [cashData, setCashData] = useState({})
    const [listData, setListData] = useState([])
    const [total, setTotal] = useState(0)
    const [size, setSize] = useState(10)
    const [currentPage, setCurrentPage] = useState(1)
    const [selectData, setSelectData] = useState({})
    const [noMoneyModuleShow, setNoMoneyModuleShow] = useState(false)
    const [clickId, setClickId] = useState(undefined)
    const [registerMoneyShow, setRegisterMoneyShow] = useState(false)
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postSofCashFindCash(parames)
                if (code === '20000') {
                    setListData(data.records)
                    setTotal(data.total)
                    setSize(parames.size)
                    setCurrentPage(parames.currentPage)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    const cashFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofCashOverviewCash()
                if (code === '20000') {
                    setCashData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        cashFun()
        listFun()
    }, [cashFun, listFun])
    /// 退款
    const handleNoMoney = id => {
        setClickId(id)
        setNoMoneyModuleShow(true)
    }
    //进入扣款页面
    const handleEnterDdeduction = (id, conNo) => {
        history.push({pathname: '/deduction', state: {
            cashId: id,
            conNo: conNo
        }})
    }
    //登记到账
    const handleRegisterModule = id => {
        setClickId(id)
        setRegisterMoneyShow(true)
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size,
            ...selectData
        }
        listFun(parames);
    }
    const columns = [
        {
            title: '编号',
            render: (text, recode, index) => <span> {index + 1} </span>
        },
        {
            title: '合同编号',
            dataIndex: 'conNo'
        },
        {
            title: '产品型号',
            dataIndex: 'product'
        },
        {
            title: '应收押金',
            dataIndex: 'ribAccounts'
        },
        {
            title: '实收押金',
            dataIndex: 'actAccounts'
        },
        {
            title: '到账日期',
            dataIndex: 'actAccountsDate'
        },
        {
            title: '扣款金额（元）',
            dataIndex: 'deductMoney'
        },
        {
            title: '实退金额',
            dataIndex: 'actRefund'
        },
        {
            title: '业务员',
            dataIndex: 'sellName'
        },
        {
            title: '退款日期',
            dataIndex: 'actRefundDate'
        }, {
            title: '操作',
            render: (text, recode) => <Space>
                <Button type='primary' onClick={() => handleNoMoney(recode.id)}> 退款 </Button>
                <Button type='primary' onClick = {() => handleEnterDdeduction(recode.id, recode.conNo)}> 扣款 </Button>
                <Button type='primary' onClick = {() => handleRegisterModule(recode.id)} > 登记到账 </Button>
            </Space>
        }
    ];
    return <EarnestMoneyAll>
        <PageHeader
            className="site-page-header"
            title="保证金/押金"
        />
        <SelectModule setSelectData={setSelectData} listFun={listFun} />
        <Row gutter={16} className='data-show'>
            <Col span={4}>
                <Statistic title="合同数量" value={cashData.contractTotal} />
            </Col>
            <Col span={4}>
                <Statistic title="应收金额" value={cashData.shouldBack} />
            </Col>
            <Col span={4}>
                <Statistic title="实收金额" value={cashData.realBack} />
            </Col>
            <Col span={4}>
                <Statistic title="扣款金额" value={cashData.deductions} />
            </Col>
            <Col span={4}>
                <Statistic title="已退金额" value={cashData.retied} />
            </Col>
            <Col span={4}>
                <Statistic title="未退金额" value={cashData.notReturned} />
            </Col>
        </Row>
        <Table columns={columns} dataSource={listData} rowKey='id' pagination={pagination} />
        <NoMoneyModule setNoMoneyModuleShow={setNoMoneyModuleShow} noMoneyModuleShow={noMoneyModuleShow} clickId = {clickId} listFun = {listFun} />
        <RegisterMoney setRegisterMoneyShow = {setRegisterMoneyShow} registerMoneyShow = {registerMoneyShow} clickId = {clickId} listFun = {listFun} />
    </EarnestMoneyAll>
}

export default EarnestMoney;